<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body class="layui-layout-body">
<div id="login_page" class="login-main">
	<form class="layui-form" action="">
		<div class="login-box" v-if="!isFirstLogin">
			<div class="logo">UBK租房管理平台</div>
			<dl>
				<dt>账号</dt>
				<dd>
					<input  @blur="changeStatus(['loginNameClassObj'], 'isFinish')"
							@focus="changeStatus(['loginNameClassObj'], 'isActive')" :class="status.loginNameClassObj"
							v-model.trim="loginName" type="text" placeholder="请输入账号" autocomplete="off" class="layui-input">
				</dd>
				<dt>密码</dt>
				<dd>
					<input  @blur="changeStatus(['passwordClassObj', 'isFinish'])"
							@focus="changeStatus(['passwordClassObj', 'isActive'])" :class="status.passwordClassObj"
							v-model.trim="password" type="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</dd>
			</dl>
			<button @click.prevent="login" class="layui-btn">登录</button>
		</div>
		<div class="first-login" v-show="isFirstLogin">
			<p class="title">为保障您的账户安全，请设置新密码</p>
			<p class="error" :class="{isError: !valid}">账号或密码错误</p>
			<dl>
				<dt>账号</dt>
				<dd>
					<input  @blur="changeStatus(['loginNameClassObj'], 'isFinish')"
							@focus="changeStatus(['loginNameClassObj'], 'isActive')" :class="status.loginNameClassObj"
							v-model.trim="modify.loginName" type="text" placeholder="请输入账号" autocomplete="off" class="layui-input">
				</dd>
				<dt>设置新密码</dt>
				<dd>
					<input @blur="changeStatus(['passwordClassObj', 'isFinish'])"
						   @focus="changeStatus(['passwordClassObj', 'isActive'])" :class="status.passwordClassObj"
						   v-model.trim="modify.newPwd" type="password" placeholder="6~20位" autocomplete="off" class="layui-input">
				</dd>
				<dt>确定密码</dt>
				<dd>
					<input @blur="changeStatus(['userClassObj', 'isFinish'])"
						   @focus="changeStatus(['userClassObj', 'isActive'])" :class="status.userClassObj"
						   v-model.trim="confirmPwd" type="password" placeholder="再次输入密码" autocomplete="off" class="layui-input">
				</dd>
			</dl>
			<button @click.prevent="editPwd" class="layui-btn">确定</button>
		</div>
	</form>
</div>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/storejson2.min.js"></script>
<script src="js/mock.js"></script>
<script src="js/mockdata.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/login.js"></script>
</body>
</html>